<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04-栅格系统-嵌套</title>
  <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <style type="text/css">
    body {

      background: #555

    }

    .loading {

      -webkit-animation: fadein 2s;

      -moz-animation: fadein 2s;

      -o-animation: fadein 2s;

      animation: fadein 2s

    }

    @-moz-keyframes fadein {

      from {

        opacity: 0

      }

      to {

        opacity: 1

      }

    }

    @-webkit-keyframes fadein {

      from {

        opacity: 0

      }

      to {

        opacity: 1

      }

    }

    @-o-keyframes fadein {

      from {

        opacity: 0

      }

      to {

        opacity: 1

      }

    }

    @keyframes fadein {

      from {

        opacity: 0

      }

      to {

        opacity: 1

      }

    }

    .spinner-wrapper {

      position: absolute;

      top: 0;

      left: 0;

      z-index: 300;

      height: 100%;

      min-width: 100%;

      min-height: 100%;

      background: rgba(255,255,255,0.93)

    }

    .spinner-text {

      position: absolute;

      top: 45%;

      left: 50%;

      margin-left: -100px;

      margin-top: 2px;

      color: #000;

      letter-spacing: 1px;

      font-size: 20px;

      font-family: Arial

    }

    .spinner {

      position: absolute;

      top: 45%;

      left: 50%;

      display: block;

      margin-left: -160px;

      width: 1px;

      height: 1px;

      border: 20px solid rgba(255,0,0,1);

      -webkit-border-radius: 50px;

      -moz-border-radius: 50px;

      border-radius: 50px;

      border-left-color: transparent;

      border-right-color: transparent;

      -webkit-animation: spin 1.5s infinite;

      -moz-animation: spin 1.5s infinite;

      animation: spin 1.5s infinite

    }

    @-webkit-keyframes spin {

      0%,100% {

        -webkit-transform: rotate(0deg) scale(1)

      }

      50% {

        -webkit-transform: rotate(720deg) scale(0.6)

      }

    }

    @-moz-keyframes spin {

      0%,100% {

        -moz-transform: rotate(0deg) scale(1)

      }

      50% {

        -moz-transform: rotate(720deg) scale(0.6)

      }

    }

    @-o-keyframes spin {

      0%,100% {

        -o-transform: rotate(0deg) scale(1)

      }

      50% {

        -o-transform: rotate(720deg) scale(0.6)

      }

    }

    @keyframes spin {

      0%,100% {

        transform: rotate(0deg) scale(1)

      }

      50% {

        transform: rotate(720deg) scale(0.6)

      }

    }
  </style>
</head>
<body>
<span class="loading">
    <span class="spinner-wrapper">
      <span class="spinner">
        <span class="spinner-text">
          正在加载
        </span>
      </span>
    </span>
</span>
</body>
</html>
